<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"/>
  <title>Mojito</title>
  <script src="../js/base.js"></script>
  <link rel="stylesheet" href="../plugins/vant/vant.min.css">
  <link rel="stylesheet" href="../styles/common.css"/>
  <link rel="stylesheet" href="../styles/pay-success.css"/>
</head>
<body>
  <div id="pay_success" class="app">
    <div class="divHead">
      <i @click="toMainPage"><van-icon name="wap-home-o" /></i>
    </div>
    <div class="divContent">
      <img src="../images/success.png"/>
      <div class="divTitle">下单成功</div>
      <div class="divTime">预计{{deliveryTime}}到达</div>
      <div class="divText">正在加紧制作中，请耐心等待~</div>
      <div class="btnView" @click="toOrderPage">查看订单</div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/vant/vant.min.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../js/common.js"></script>
  <script>
    new Vue({
      el: "#pay_success",
      data() {
        return {
          deliveryTime: ''
        }
      },
      created() {
        this.getDeliveryTime()
      },
      methods: {
        // 获取预计送达时间（目前时间 + 30分钟）
        getDeliveryTime() {
          let now = new Date()
          let hour = now.getHours()
          let minute = now.getMinutes() + 30
          if (minute >= 60) {
            hour = hour + 1
            minute = minute - 60
          }
          if (hour < 10) {
            hour = '0' + hour
          }
          if (minute < 10) {
            minute = '0' + minute
          }
          this.deliveryTime = hour + ':' + minute
        },

        // 使用window.location.replace，当前页面就不会写到浏览记录中
        toOrderPage() {
          const id = getUrlParam("id")
          window.requestAnimationFrame(() => {
            window.location.replace(`/front/page/order-detail.html?id=${id}`)
          })
        },
        toMainPage() {
          window.requestAnimationFrame(() => {
            window.location.replace('/front/index.html')
          })
        },
      }
    })
  </script>
</body>
</html>